<template>
  <div class="style">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-col :span="6">
          <el-form-item label="房号:">
            <el-input class="input" v-model="formInline.fanghao" placeholder="请输入房号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态:">
            <el-select class="input" v-model="formInline.danyuan" placeholder="请选择房间状态">
              <el-option label="业主自住" value="业主自住"></el-option>
              <el-option label="出租" value="出租"></el-option>
              <el-option label="待售" value="待售"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物业类型:">
            <el-select class="input" v-model="formInline.type" placeholder="请输入物业类型">
              <el-option label="写字楼" value="写字楼"></el-option>
              <el-option label="公寓" value="公寓"></el-option>
              <el-option label="商铺" value="商铺"></el-option>
              <el-option label="高层住宅" value="高层住宅"></el-option>
              <el-option label="洋房" value="洋房"></el-option>
              <el-option label="别墅" value="别墅"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item id="btn">
          <el-button type="primary" class="btn" @click="onSearch">查询</el-button>
        </el-form-item>
        <el-form-item id="btn">
          <el-button type="info" class="btn" @click="onResize">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style='headerstyle'>
        <el-table-column prop="utilities_id" label="序号" width="230">
        </el-table-column>
        <el-table-column prop="utilities_fh" label="房号" width="240">
        </el-table-column>
        <el-table-column prop="utilities_lx" label="物业类型" width="240">
        </el-table-column>
        <el-table-column prop="utilities_zt" label="状态" width="240">
        </el-table-column>
        <el-table-column prop="utilities_jfrq" label="缴费日期" width="240">
        </el-table-column>
        <el-table-column prop="utilities_jfqk" label="缴费情况" width="240">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 详情弹框 -->
    <el-dialog title="详情" class="aaa" :visible.sync="xiangqingVisible">
      <div>
        <h3>房产信息 <el-tag type="danger">{{tableData2.utilities_jfqk}}</el-tag>
        </h3>
        <el-descriptions class="desc" title="" :column='2' :colon='false'>
          <el-descriptions-item label="所属楼栋:">{{tableData2.utilities_dy}}</el-descriptions-item>
          <el-descriptions-item label="物业类型:">{{tableData2.utilities_lx}}</el-descriptions-item>
          <el-descriptions-item label="房号:">{{tableData2.utilities_fh}}</el-descriptions-item>
          <el-descriptions-item label="户型:">{{tableData2.utilities_mj}}</el-descriptions-item>
          <el-descriptions-item label="面积:">{{tableData2.utilities_hx}}平方米</el-descriptions-item>
          <el-descriptions-item label="状态:">{{tableData2.utilities_zt}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-divider></el-divider>
      <h3>费用信息</h3>
      <el-descriptions class="desc" title="" :column='4' :colon='false'>
        <el-descriptions-item label="水费:">{{tableData2.utilities_sfdj}}</el-descriptions-item>
        <el-descriptions-item label="上次缴费读表数:">{{tableData2.utilities_sfSCdb}}</el-descriptions-item>
        <el-descriptions-item label="最新读表数">{{tableData2.utilities_sfZXdb}}</el-descriptions-item>
        <el-descriptions-item label="单价:">{{tableData2.utilities_sfdj}}</el-descriptions-item>
        <el-descriptions-item label="电费:">{{tableData2.utilities_dfdj}}</el-descriptions-item>
        <el-descriptions-item label="上次缴费读表数:">{{tableData2.utilities_dfSCdb}}</el-descriptions-item>
        <el-descriptions-item label="最新读表数">{{tableData2.utilities_dfZXdb}}</el-descriptions-item>
        <el-descriptions-item label="单价:">{{tableData2.utilities_dfdj}}</el-descriptions-item>
        <el-descriptions-item label="气费:">{{tableData2.utilities_qfdj}}</el-descriptions-item>
        <el-descriptions-item label="上次缴费读表数:">{{tableData2.utilities_qfSCdb}}</el-descriptions-item>
        <el-descriptions-item label="最新读表数">{{tableData2.utilities_qfZXdb}}</el-descriptions-item>
        <el-descriptions-item label="单价:">{{tableData2.utilities_qfdj}}</el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" class="btn1" @click="jiaofeiVisible = true" v-if="tableData2.utilities_jfqk=='欠费'">立即缴费</el-button>
      <el-button type="primary" class="btn1" @click="jiaofeiVisible = true" disabled v-else>立即缴费</el-button>
      <!-- 内嵌聊天框   缴费 -->
      <el-dialog width="30%" class="aaa" title="立即缴费" :visible.sync="jiaofeiVisible" append-to-body>
        <span class="demonstration">缴费至日期</span>
        <el-date-picker v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="选择日期：">
        </el-date-picker>
        <el-descriptions class="des" :column='3' :colon='false'>
          <el-descriptions-item label="水费:">{{tableData2.utilities_sfdj}}</el-descriptions-item>
          <el-descriptions-item label="">{{tableData2.utilities_sfdj}} 元/月</el-descriptions-item>
          <el-descriptions-item label="已缴费日期:">{{tableData2.utilities_jfrq}}</el-descriptions-item>
          <el-descriptions-item label="电费:">{{tableData2.utilities_dfdj}}</el-descriptions-item>
          <el-descriptions-item label="">{{tableData2.utilities_dfdj}} 元/月</el-descriptions-item>
          <el-descriptions-item label="已缴费日期:">{{tableData2.utilities_jfrq}}</el-descriptions-item>
          <el-descriptions-item label="气费:">{{tableData2.utilities_qfdj}}</el-descriptions-item>
          <el-descriptions-item label="">{{tableData2.utilities_qfdj}} 元/月</el-descriptions-item>
          <el-descriptions-item label="已缴费日期:">{{tableData2.utilities_jfrq}}</el-descriptions-item>
          <el-descriptions-item label="合计:">{{num}} 元/PCS</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <div>
          <h3>支付方式</h3>
          <el-radio v-model="radio" label="1">微信</el-radio>
          <el-radio v-model="radio" label="2">支付宝</el-radio>
        </div>
        <el-button type="primary" @click="jiaofei" class="btn3">确 定</el-button>
      </el-dialog>
      <el-divider></el-divider>
      <h3>用户信息</h3>
      <el-descriptions class="desc" title="" :column='2'>
        <el-descriptions-item label="业主姓名" class="aa">{{tableData2.utilities_yzxm}}</el-descriptions-item>
        <el-descriptions-item label="身份证号码">{{tableData2.utilities_sfzh}}
        </el-descriptions-item>
        <el-descriptions-item label="电话号码">{{tableData2.utilities_dhhm}}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <h3>其他信息</h3>
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
      </el-input>
    </el-dialog>

    <div>
      <page class="page"></page>
    </div>
  </div>

</template>

<script>
import Event from "../../utils/Event.js";
import page from '../../components/page.vue'
export default {
  methods: {
    //表头颜色
    headerstyle() {
      return 'background:#FAFAFA'
    },
    //详情
    // 查询
    onSearch() {
      //只查房号
      if (this.formInline.fanghao && this.formInline.danyuan == '' && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].utilities_fh) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有房号，加状态
      else if (this.formInline.fanghao != '' && this.formInline.danyuan && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].utilities_fh
            && this.formInline.danyuan == this.toltable[i].utilities_zt

          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有房号，加类型
      else if (this.formInline.fanghao != '' && this.formInline.danyuan == '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].utilities_fh
            && this.formInline.type == this.toltable[i].utilities_lx
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //有类型，加状态
      else if (this.formInline.fanghao == '' && this.formInline.danyuan != '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.type == this.toltable[i].utilities_lx
            && this.formInline.danyuan == this.toltable[i].utilities_zt
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //三个查
      else if (this.formInline.fanghao != '' && this.formInline.danyuan != '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.fanghao == this.toltable[i].utilities_fh
            && this.formInline.danyuan == this.toltable[i].utilities_zt
            && this.formInline.type == this.toltable[i].utilities_lx
          ) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //只查类型
      else if (this.formInline.fanghao == '' && this.formInline.danyuan == '' && this.formInline.type) {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.type == this.toltable[i].utilities_lx) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      //只查状态
      else if (this.formInline.fanghao == '' && this.formInline.danyuan && this.formInline.type == '') {
        for (let i = 0; i < this.toltable.length; i++) {
          if (this.formInline.danyuan == this.toltable[i].utilities_zt) {
            this.inputarr.push(this.toltable[i])
          }
        }
        Event.$emit('table', this.inputarr)
        this.inputarr = []
      }
      else {
        this.getuser()
      }
    },
    // 重置
    onResize() {
      this.formInline.fanghao = ''
      this.formInline.danyuan = ''
      this.formInline.type = ''
      this.inputarr = []
      this.getuser()
    },
    //获取
    getuser: function () {
      this.$axios({
        url: '/charge/utilitiesSel'
      }).then((res) => {
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData;
        //(v);
      })
    },
    checkDetail(val) {
      this.xiangqingVisible = true;
      this.tableData2 = val
    },
    //缴费确认
    jiaofei() {
      let fh = this.tableData2.utilities_fh
      this.$axios({
        url: '/charge/utilitiesChange',
        method: 'post',
        data: {
          fh: fh
        }

      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '缴费成功!',
          });
          this.jiaofeiVisible = false,
            this.xiangqingVisible = false;
          this.getuser()
        }
      }).catch((res) => {
        (res);
        if (res.data.code == 500) {
          this.$message({
            type: 'info',
            message: '已取消缴费'
          });
          this.jiaofeiVisible = false,
            this.xiangqingVisible = false;
          this.getuser()
        }
      });
    }
  },
  created() {
    this.getuser();
  },
  mounted() {
    this.receive();
  },
  beforeUpdate() {
    this.receive();
  },
  data() {
    return {
      formInline: {
        fanghao: '',
        danyuan: '',
        type: ''
      },
      //日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      value1: '',
      //用户信息
      formLabelWidth: '120px',
      xiangqingVisible: false,
      jiaofeiVisible: false,
      tableData: [],
      tableData2: [],
      textarea: '',
      inputarr: [],
      currentPage4: 4,
      radio: '1'
    }
  },
  components: { page },
  computed: {
    num: function () {
      if (this.tableData2.utilities_jfrq) {

        let ri = (this.value1.slice(5, 7) - this.tableData2.utilities_jfrq.slice(5, 7))
        if (ri <= 0) {
          ri = 1
        }
        (this.tableData2.utilities_sfdj.slice(0, 5));
        return ri * this.tableData2.utilities_sfdj.slice(0, 5) + ri * this.tableData2.utilities_dfdj.slice(0, 5) + ri * this.tableData2.utilities_qfdj.slice(0, 5)
      }

    }
  }
}
</script>
<style scoped>
.style {
  padding: 50px;
  margin-top: 20px;
}
.page {
  text-align: center;
  margin-top: 30px;
}
.el-table {
  padding-left: 18px;
}
.input {
  width: 280px;
  margin: 0 5px;
}
.btn {
  margin: 0 22px;
}
.btn1 {
  margin-left: 60px;
}
.btn2 {
  height: 15px;
  width: 30px;
  text-align: center;
  padding-bottom: 5px;
}
.des {
  margin: 20px 20px;
}
.btn3 {
  margin: 30px 30px;
  width: 200px;
}
h3 {
  padding: 10px 0 20px 0;
}
.desc {
  margin: 5px 60px;
}
.el-radio {
  margin-left: 30px;
}
</style>
<style>
.aaa .el-dialog__body {
  padding: 0 20px 30px 20px;
}
</style>